<!-- 用户直接转账 -->
<template>
	<view>
		<view class="topBack">

		</view>

		<uni-nav-bar backgroundColor="transparent" :statusBar="true" :border="false" :fixed="true" left-icon="back"
			@clickLeft="$tab.back()" title="转账">
		</uni-nav-bar>

		<view class="status" :style="{
			height:statusbar + 'px'
		}">

		</view>

		<view class="px-20 mt-32 relative z-index-999">
			<view class="px-32 py-32 bg-FFF round-12">
				<view class="flex items-center">
					<view class="text-28 font-700">
						支付货币
					</view>
					<view class="text-24 ml-16 text-gray">
						付款给{{phone}}
					</view>
				</view>

				<view class="mt-48 px-20">
					<u-radio-group v-model="selected" @change="radioChange">
						<u-radio activeColor="#FA554E" v-for="(item,index) in currencys" :key="index" :label="item.moneyName" :name="item.id"></u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="px-32 bg-FFF py-48 round-12 mt-48">
				<view class="color-000 text-center">
					收款额度
				</view>
				<view class="mt-16">
					<u--input placeholder="请输入收款额度" border="bottom" type="number" clearable v-model="price"></u--input>
				</view>

				<view class="flex items-center mt-32 text-28">
					<view class="">
						实际支付额度：
					</view>
					<view class="text-theme">
						{{practicalPrice}}
					</view>
				</view>

				<view class="flex items-center mt-16 text-28">
					<view class="">
						当前剩余额度：
					</view>
					<view class="text-theme">
						{{userResidue}}
					</view>
				</view>

				<view class="flex items-center mt-16 text-28">
					<view class="">
						平台服务费：
					</view>
					<view class="text-theme">
						{{serviceCharge}}
					</view>
				</view>
			</view>
		</view>

		<view class="box-3 round-12 text-32 text-FFF text-center" @click="(pay_password=true&&price>0)">
			提交
		</view>


		<u-popup :show="pay_password" @close="pay_password = false,payPassword='' " mode="center" :round="20">
			<view style="width:650rpx;padding: 48rpx;">
				<view class="text-28 text-center font-700">
					请输入支付密码
				</view>
				<view class="mt-32">
					<u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>
				<u-button text="确认" class="mt-28 bg-theme text-FFF" @click="confirm()"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusbar: uni.getSystemInfoSync().statusBarHeight + 44,
				price: null,
				selected: "",
				currencys: [],
				serviceCharge: 0,
				userResidue: null,
				userResidueArr: [],
				practicalPrice: 0,
				phone: null,
				pay_password: false,
				payPassword: ''
			};
		},
		onLoad(e) {
			this.getData()
			this.phone = e.phone
		},
		watch: {
			price(newVal) {
				this.$Api.common.moneyServiceFee(this.selected, newVal).then(res => {
					this.practicalPrice = res.data + Number(newVal)
				})
			}
		},
		methods: {
			radioChange(e) {
				this.currencys.forEach(item => {
					if (item.id == e) {
						this.serviceCharge = item.sendServiceFee
					}
				})
				this.userResidueArr.forEach((i) => {
					if (i.moneyId == this.selected) {
						this.userResidue = i.amount
					}
				})
			},
			async getData() {
				const res = await this.$Api.common.moneyTypeList({
					isSend: 1
				})
				this.currencys = res.data
				this.selected = this.currencys[0].id
				this.serviceCharge = this.currencys[0].sendServiceFee
				const userResidue = await this.$Api.user.userRichInfo()
				userResidue.data.forEach((i) => {
					if (i.moneyId == this.selected) {
						this.userResidue = i.amount
					}
				})
				this.userResidueArr = userResidue.data
			},
			async confirm() {
				if (!this.payPassword || this.payPassword.length < 6) {
					uni.$u.toast('请输入支付密码')
					return false
				}
				this.pay_password = false
				this.$modal.confirm('确认转账吗?').then(res => {
					if (res) {
						this.$Api.user.moneyMoneySend({
							userName: this.phone,
							moneyTypeId: this.selected,
							amount: this.price,
							payPassword: this.payPassword
						}).then(money => {
							this.$modal.msg('转账成功!')
							setTimeout(()=>{
								this.$tab.back()
							},1500)
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8f8f8;
	}
</style>

<style lang="scss">
	.topBack {
		height: 342rpx;
		background: linear-gradient(180deg, #E2FFE7 0%, rgba(226, 255, 231, 0) 100%);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
	}
	
	
	/deep/ .u-radio-group {
		display: flex;
		justify-content: space-between;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.box-3 {
		width: 400rpx;
		height: 80rpx;
		background: $theme-color;
		margin: 220rpx auto;
		line-height: 80rpx;
	}
	
	/deep/ .u-code-input{
		justify-content: space-between;
	}
</style>